 <template>
  <div class="home">
    <el-container>
      <!-- header部分 -->
      <el-header style="height: 75px;">
        <!-- logo部分 -->
        <div class="logo">
          <img src="../assets/logo.png" alt>
          <p>海川云谷</p>
        </div>
        <!-- 公共导航部分 -->
        <div class="system-title">
          <router-link to="/" class="el-breadcrumb-item">
            <a href="#">首页</a>
          </router-link>
          <router-link to="/Asset" class="el-breadcrumb-item">
            <a href="#">资产管理</a>
          </router-link>
          <router-link to="/Statistics" class="el-breadcrumb-item">
            <a href="#">统计分析</a>
          </router-link>
          <router-link to="/Check" class="el-breadcrumb-item">
            <a href="#">盘点管理</a>
          </router-link>
          <router-link to="/Board" class="el-breadcrumb-item">
            <a href="#">模块标签</a>
          </router-link>
        </div>
        <div class="notice">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-bell"/>
              </template>
              <el-button type="text" @click="centerDialogVisible = true">
                关于网站使用说明
                <br>2019-04-04 11:30
              </el-button>
            </el-submenu>
            <el-dialog
              title="关于我们"
              :visible.sync="centerDialogVisible"
              width="50%"
              center
              style="font-size:20px;font-weight:700"
            >
              <div class="Notice" style="font-weight:400">
                <div id="u83" class="ax_default _文本段落" type="text">
                  <div id="u145" class="ax_default label">
                    <div id="u146" class="text">
                      <p style="text-align:center">
                        <span>我们的目标是成为您最挚爱的资产管理工具，并为此不断努力</span>
                      </p>
                    </div>
                  </div>
                  <br>
                  <div id="u83_div" class></div>
                  <div id="u83_text" class="text">
                    <p style="text-align:left;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >&nbsp;&nbsp; &nbsp; &nbsp; 海川云谷资产云管理平台隶属于武行海川云谷软件技术有限公司，是一款专业在线固定资产管理工具。它支持资产导入、导出，资产盘点，资产统计以及在线标签打印等功能。</span>
                    </p>
                    <p style="text-align:left;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >&nbsp;&nbsp; &nbsp; &nbsp; 报表设计完全可视化，用户可随心所欲设计出各类复杂的报表、卡片、标签。</span>
                    </p>
                    <p style="text-align:left;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >盘点方式灵活多样，支持人工盘点、采集器盘点、扫描枪盘点、手机盘点。</span>
                    </p>
                    <p style="text-align:left;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >&nbsp;&nbsp; &nbsp; &nbsp; 资产管理也好、资产盘点也罢，都是帮助我们从抽象中来，到具象中去的方法，海川云谷资产云平台会把这些方法加强，相信这种加强对常常需要“离散—总结—再离散”自己资产管理的伙伴来说，是有价值的。它为固定资产管理提供了更多可能。</span>
                    </p>
                    <p style="text-align:left;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >&nbsp;&nbsp; &nbsp; &nbsp; 海川软件潜心研究五年，国内首家开发专门针对实物的固定资产条码管理系统 (一维码、二维码，RFID), 功能强大完善，适应性强 ，有效解决了企事单位经常出现的实物与财务帐目不符的问题，由于实现了对固定资产全生命周期的跟踪，从而做到了对固定资产的精准化管理 。</span>
                    </p>
                    <p style="text-align:left;">
                      <span style="font-family:'ArialMT', 'Arial';">
                        <br>
                      </span>
                    </p>
                    <p style="text-align:center;">
                      <span style="font-family:'ArialMT', 'Arial';">&nbsp;</span>
                      <span style="font-family:'PingFangSC-Regular', 'PingFang SC';">传真：</span>
                      <span style="font-family:'ArialMT', 'Arial';">027-81306201-801</span>
                    </p>
                    <p style="text-align:center;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >&nbsp;&nbsp; &nbsp; &nbsp; E-mail</span>
                      <span style="font-family:'PingFangSC-Regular', 'PingFang SC';">：</span>
                      <span style="font-family:'ArialMT', 'Arial';">hjr2508@163.com(</span>
                      <span style="font-family:'PingFangSC-Regular', 'PingFang SC';">合作</span>
                      <span style="font-family:'ArialMT', 'Arial';">)</span>
                    </p>
                    <p style="text-align:center;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >电话：027-81306201/02/03/30/31 400-6262-027（全国长途免费）</span>
                    </p>
                    <p style="text-align:center;">
                      <span
                        style="font-family:'ArialMT', 'Arial';"
                      >&nbsp;&nbsp; &nbsp; &nbsp; 武汉总部地址：武汉市高新四路40号葛洲坝太阳城工业园1栋102（市内乘公交：789,787,757,751,334可到）</span>
                    </p>
                  </div>
                </div>
              </div>
            </el-dialog>
            <!-- 用户头像 -->
            <el-submenu index="2" style="text-align:center">
              <template slot="title" class="welcome">
                <img :src="'?imageView2/1/w/80/h/80'" class="user-avatar">
                <span class="welcome">您好，{{$store.getters.account}}</span>
              </template>
              <el-menu-item index="2-1">
                <el-button type="text" @click="outerVisible= true">个人中心</el-button>
              </el-menu-item>
              <el-menu-item index="2-3">
                <el-button type="text">
                  <router-link to="/User">用户管理</router-link>
                </el-button>
              </el-menu-item>
              <el-menu-item index="2-2" type="text" @click="logout">
                <el-button type="text">退出系统</el-button>
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <!-- <span class="welcome">您好，{{$store.getters.account}}</span> -->
          <!-- <el-button type="text" @click="logout">退出</el-button> -->

          <!-- 用户中心 -->
          <el-dialog title="用户中心" :visible.sync="outerVisible">
            <el-form :model="form">
              <el-form-item label="头像" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  auto-complete="off"
                  style="width:300px;margin:0 90px 0 0;"
                ></el-input>
                <el-button type="primary" @click="innerVisible1= true">修改密码</el-button>
              </el-form-item>
              <el-dialog width="30%" title="修改密码" :visible.sync="innerVisible1" append-to-body>
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入旧密码"></el-input>
                <el-form-item></el-form-item>
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入新密码"></el-input>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="outerVisible1 = false">取 消</el-button>
                  <el-button type="primary" @click="innerVisible1  = true">保存</el-button>
                </div>
              </el-dialog>
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  auto-complete="off"
                  style="width:300px;margin:0 80px 0 0;"
                ></el-input>
                <el-button type="primary" @click="innerVisible2 = true">修改手机号</el-button>
              </el-form-item>
              <el-dialog width="30%" title="修改手机号" :visible.sync="innerVisible2" append-to-body>
                <el-form-item label="原手机号" :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off" placeholder="请输入旧手机号"></el-input>
                </el-form-item>
                <el-form-item></el-form-item>
                <el-form-item label="验证码" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    auto-complete="off"
                    placeholder="请输入验证码"
                    style="width:120px;margin:0 15px 0 0;"
                  ></el-input>
                  <el-button type="primary">获取验证码</el-button>
                </el-form-item>
                <el-dialog width="30%" title="设置手机号" :visible.sync="innerVisible3" append-to-body>
                  <el-form-item label="新手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off" placeholder="请输入新手机号"></el-input>
                  </el-form-item>
                  <el-form-item></el-form-item>
                  <el-form-item label="验证码" :label-width="formLabelWidth">
                    <el-input
                    v-model="form.name"
                    auto-complete="off"
                    placeholder="请输入验证码"
                    style="width:120px;margin:0 15px 0 0;"
                  ></el-input>
                    <el-button type="primary">获取验证码</el-button>
                  </el-form-item>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="innerVisible2 = true">保存</el-button>
                  </div>
                </el-dialog>
                <div slot="footer" class="dialog-footer">
                  <!-- <el-button @click="outerVisible1 = false">取 消</el-button> -->
                  <el-button type="primary" @click="innerVisible3 = true">下一步</el-button>
                </div>
              </el-dialog>
              <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  auto-complete="off"
                  style="width:300px; margin:0 90px 0 0;"
                ></el-input>
                <el-button type="primary" @click="innerVisible4 = true">修改账号</el-button>
              </el-form-item>
              <el-dialog width="30%" title="修改账号" :visible.sync="innerVisible4" append-to-body>
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入旧账号"></el-input>
                <el-form-item></el-form-item>
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入新账号"></el-input>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="outerVisible4 = false">取 消</el-button>
                  <el-button type="primary" @click="innerVisible4 = true">保存</el-button>
                </div>
              </el-dialog>
              <el-form-item label="企业名称" :label-width="formLabelWidth">
                <!-- <el-input v-model="form.name" auto-complete="off"></el-input> -->
                <span>武汉海川云谷软件技术有限公司</span>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="outerVisible = false">取 消</el-button>
              <el-button type="primary" @click="innerVisible = true">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-header>
      <!-- 中间内容部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
           
<script>
export default {
  data() {
    return {
      isCollapse: false,
      menuData: [],
      activeIndex: "1",
      dialogFormVisible1: false,
      outerVisible: false,
      innerVisible: false,
      outerVisible1: false,
      innerVisible1: false,
      outerVisible2: false,
      innerVisible2: false,
      outerVisible3: false,
      innerVisible3: false,
      outerVisible4:false,
      innerVisible4 :false,
      centerDialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    logout() {
      // 1. 清除登录状态，即删除保存在localStorage中的token
      localStorage.removeItem("mytoken");
      // 2. 跳转到登录页面
      this.$router.push({ name: "Login" });
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .el-menu-admin:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-container {
    height: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  .el-header {
    width: 106%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #323232;
  }
  .el-menu {
    border: none;
    background-color: #323232;
    /* :hover {
      background-color: #ff9900;
    } */
  }
  .el-main {
    width: 105%;
    background-color: #f3f6fb;
    padding: 0;
  }
  .el-breadcrumb-item {
    width: 108px;
    height: 50px;
    color: #999999;
    font-size: 16px;
    line-height: 28px;
  }
  a {
    text-align: center;
    line-height: 50px;
    display: inline-block;
    &:hover {
      background-color: #ff9900;
    }
  }
  .logo {
    width: 30px;
    height: 50px;
    position: relative;
    background-color: #323232;
    img {
      position: absolute;
      height: 40px;
      width: 43px;
      left: 10px;
      top: 10px;
    }
    p {
      display: inline-block;
      position: absolute;
      width: 73px;
      height: 25px;
      left: 60px;
      top: 33px;
      font-family: "Arial-BoldMT", "Arial Bold", "Arial";
      font-weight: 700;
      font-style: normal;
      color: #ff9900;
    }
  }
  .system-title {
    // width: 100%;
    font-size: 20px;
    color: #999999;
    padding: 30px 50px;
  }
  .logout-btn {
    color: orange;
  }
  .welcome {
    color: #ccc;
  }
  .avatar-wrapper {
    cursor: pointer;
    margin-top: 5px;
    position: relative;
    line-height: initial;
  }
  .user-avator {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px 10px;
  }
}
</style>



